<template>
	<view class="ExploreMore" @click="toTutorial">
		<text class="title">探索更多</text>
		<view class="ExploreMoreCard">
			<image src="https://img.js.design/assets/img/6254201745951ba9635189a1.png" mode="aspectFill"></image>
			<view class="content">
				<text class="place">川西</text>
				<text class="introduce">私人定制品牌活动</text>
				<view class="but">
					<text>查看详情</text>
					<image src="@/static/index/Black_arrow.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {routerGuard} from '@/config/RouteGuard.js'
	const toTutorial = () =>{
		const url = `/homeSubpages/customize/tutorial/tutorial`;
		routerGuard(url);
	}
</script>

<style lang="scss" scoped>
	.ExploreMore{
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		.title{
			font-size: 36rpx;
			font-weight: 500;
			color: #000;
		}
		.ExploreMoreCard{
			width: 100%;
			height: 308rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.content{
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				text {
					display: block;
					color: rgba(255, 255, 255, 1);
				}
				.place{
					height: 43rpx;
					font-size: 36rpx;
					font-weight: 500;
				}
				.introduce{
					width: 230rpx;
					font-size: 48rpx;
					font-weight: 600;
					word-wrap: break-word;
					overflow-wrap: break-word;
					margin-top: 12rpx;
					margin-bottom: 40rpx;
				}
				.but{
					width: 125rpx;
					height: 28rpx;
					display: flex;
					justify-content: space-between;
					position: relative;
					border: 1rpx solid rgba(255, 255, 255, 1);
					text{
						font-size: 20rpx;
						font-weight: 400;
						margin-left: 5rpx;
					}
					image{
						position: absolute;
						width: 60rpx;
						height: 64rpx;
						right: -34rpx;
						top: -1rpx;
					}
				}
			}
		}
	}
</style>